<template>
  <div class="app-container">
    <!-- 绿洲终端管理 -->
    <el-page-header @back="goBack" content="绿洲终端">
    </el-page-header>
    <el-divider></el-divider>
    <!-- <div class="app-container-search" style="padding-bottom: 10px;">
      <el-form size="small" :model="form" :inline="true" label-width="90px">
        <el-form-item label="所属产品">
          <el-select placeholder="请选择" clearable v-model="form.productId">
            <el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="生产厂商">
          <el-select placeholder="请选择" clearable v-model="form.manuId">
            <el-option v-for="item in manufacturerList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-button style="margin-left: 20px;" size="small" type="primary" icon="el-icon-search"
        @click="getRule">搜索</el-button>
      <el-button size="small" icon="el-icon-refresh">重置</el-button>

    </div> -->

    <!-- <el-row>
      <el-button style="margin: 10px 0 10px;" size="mini" type="primary" @click="dialog_newly = true"
        icon="el-icon-folder-add">新增</el-button>
    </el-row> -->

    <el-divider></el-divider>

    <!-- 表格 -->
    <el-table size="medium" :data="tableData" tooltip-effect="dark" style="width: 100%" border>
      <el-table-column prop="tmnName" label="终端名" align="center"></el-table-column>
      <el-table-column prop="tmnType" label="终端型号名" align="center"></el-table-column>
      <el-table-column prop="firmName" label="厂商名" align="center"></el-table-column>
      <el-table-column prop="firmTopic" label="厂商Topic" align="center"></el-table-column>
      <el-table-column prop="tmnDevSN" label="终端标识" align="center"></el-table-column>
      <el-table-column prop="linkType" label="终端接入方式" align="center"></el-table-column>
      <el-table-column prop="indexType" label="终端索引类型" align="center"></el-table-column>
      <el-table-column prop="indexLen" label="终端索引长度" align="center"></el-table-column>
      <el-table-column prop="tmnOIDIndex" label="终端唯一标识" align="center"></el-table-column>
      <el-table-column prop="state" label="终端在线状态" align="center"></el-table-column>
      <!-- <el-table-column prop="" label="终端回调类型" align="center"></el-table-column> -->
      <!-- <el-table-column prop="" label="终端回调参数" align="center"></el-table-column> -->
      <el-table-column prop="netConfig" label="网络配置位" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.netConfig == true">true</span>
          <span v-if="scope.row.netConfig == false">false</span>
        </template>
      </el-table-column>
      <el-table-column prop="isPeripheral" label="是否可绑定传感器" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.isPeripheral == true">true</span>
          <span v-if="scope.row.isPeripheral == false">false</span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="" label="终端版本号" align="center"></el-table-column> -->
      <!-- <el-table-column prop="" label="终端心跳间隔" align="center"></el-table-column> -->
      <el-table-column prop="productKey" label="型号标识" align="center"></el-table-column>

      <!-- <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 0">正常</span>
          <span v-if="scope.row.status == 1">停用</span>
        </template>
</el-table-column> -->
      <el-table-column prop="handle" label="操作" align="center" width="200">
        <template slot-scope="scope">
          <!-- <el-button size="mini" type="primary" plain @click="getDetail(scope.row)">详情</el-button> -->
          <el-button size="mini" type="primary" plain @click="getData(scope.row)">设备数据</el-button>
          <el-button size="mini" type="primary" plain @click="getInstruct(scope.row)">设备指令</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- <el-pagination class="pagination" background layout="prev, pager, next" :total="total" :page-size="10"
      @current-change="handleCurrentChange"></el-pagination> -->


    <el-dialog title="设备指令" :visible.sync="showDialogInstruct" width="50%">
      <div class="ruleBox">
        <el-card shadow="never" class="ruleItem" v-for="item in Rules" :key="item.Name">
          <div style="width: 100%;height:100%;">
            <i class="el-icon-thumb" style="margin-right: 10px;"></i>
            <span>{{ item.Name }}</span>
          </div>
        </el-card>
      </div>
    </el-dialog>

    <el-dialog title="设备数据" :visible.sync="showDialogData" width="50%">

    </el-dialog>

  </div>
</template>

<script>
import { getTerminal, getDetail, getData, getInstruct } from '@/api/terminalManage/terminalLists/index.js'


export default {
  data() {
    return {
      showDialogInstruct: false,
      showDialogData: false,
      labelPosition: "left",
      dialog_change: false,
      dialog_newly: false,
      tableData: [],
      searchData: "",
      form: {
        manuId: "",
        productId: "",
        current: 0,
        field: "",
        order: "",
        pageSize: 10
      },
      formNewRule: {
        name: '',
        manuId: '',
        productId: "",
        keywords: "",
        remark: ''
      },
      formChangeRule: {
        id: "",
        name: '',
        status: '',
        remark: ''
      },
      total: 0,
      detailData: "",
      Rules: []
    }
  },
  methods: {
    getInstruct(e) {
      this.showDialogInstruct = true
      getInstruct({
        tmnOIDIndex: e.tmnOIDIndex,
        productKey: e.productKey,
        firmTopic: "",
        terminalType: ""
      }).then(res => {
        this.Rules = (JSON.parse(res.data.data)).data.dataList
        // console.log(res.data.data);
        console.log(JSON.parse(res.data.data))
      })
    },
    // 数据
    getData(e) {
      this.showDialogData = true
      getData({
        tmnOIDIndex: e.tmnOIDIndex,
      }).then(res => {
        // this.detailData = (JSON.parse(res.data.data)).data
        // console.log(res.data.data);
        console.log(JSON.parse(res.data.data))
      })
    },
    // 详情
    getDetail(e) {
      getDetail({
        tmnOIDIndex: e.tmnOIDIndex,
        sceneID: this.searchData.shopId,
      }).then(res => {
        this.detailData = (JSON.parse(res.data.data)).data
        // console.log(res.data.data);
        console.log(JSON.parse(res.data.data))
      })
    },
    goBack() {
      this.$router.push('./viewsManage')
    },
    //  修改规则弹窗
    updateRuleDialog(e) {
      this.dialog_change = true
      this.formChangeRule.id = e.id
      this.formChangeRule.name = e.name
      this.formChangeRule.remark = e.remark
      this.formChangeRule.status = e.status.toString()


    },
    //  修改规则确认
    updateRuleConfirm() {
      updateRule(this.formChangeRule).then(res => {
        if (res.data.success == true) {
          this.dialog_change = false
          this.$message({
            message: '修改成功!',
            duration: 1000,
            type: 'success',
            onClose: () => {
              this.getRule()
            }
          })
        }
      })

    },
    // 添加规则
    addNewRule() {
      addRule(this.formNewRule).then(res => {
        if (res.data.success == true) {
          this.dialog_newly = false
          this.$message({
            message: '添加成功!',
            duration: 1000,
            type: 'success',
            onClose: () => {
              this.getRule()
            }
          })
        } else {
          this.$message({
            message: res.data.message,
            duration: 1000
          })
        }
      })
    },

    handleCurrentChange(e) {
      //当前页
      this.form.current = e
      this.getRule()
    },
    //  查询终端
    getTerminal() {
      getTerminal(
        {
          sceneID: this.searchData.shopId,
          pageNo: 1,
          pageSize: 10,
          tmnType: "",
          addrDescription: "",
          state: ""
        }
      ).then(res => {
        if (res.data.success == true) {
          this.tableData = (JSON.parse(res.data.data)).data.list
          // console.log(res.data.data);
          console.log(JSON.parse(res.data.data));
          // this.total = res.data.data.total
        } else {
          this.tableData = []
          this.$message({
            message: res.data.message,
            duration: 1000
          })
        }
      })
    },

  },
  created() {
    // console.log(this.$route.params);
    this.searchData = this.$route.params
    this.getTerminal()

  },
};
</script>
<style lang="scss" scoped>
.pagination {
  float: right;
  margin-top: 10px;
}

.ruleItem {
  cursor: pointer;
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: bold;
  color: #277dd3;
  // background-color: #f2f9ff;
  background: linear-gradient(to right, #f2f9ff, white);
}

.ruleItem:hover {
  box-shadow: 6px 1px 10px 4px #d2d2d2;
}
</style>
